<template>
  <div v-if="comData">
    <component
      :is="comData.components"
      :data="comData"
    >
    </component>
  </div>
</template>

<script>
// 导入所有组件
const resultComps = {}
let requireComponent = require.context(
  './', // 在当前目录下查找
  false, // 不遍历子文件夹
  /.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach((fileName) => {
  let comp = requireComponent(fileName)
  resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})

export default {
  components: resultComps,
  props: {
    comData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  methods: {},
  created() {},
}
</script>

<style lang='scss' scoped>
.areaBox {
  transition: all 0.3s;
  background: #fff;
  &:hover {
    transform: scale(0.95);
    border-radius: 10px;
    box-shadow: 0 0 10px #afafaf;
    .el-icon-error {
      display: block;
    }
  }
  div {
    pointer-events: none;
  }
  .wait {
    background: #deedff;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 12px;
    color: #666;
  }
  .el-icon-error {
    position: absolute;
    right: -10px;
    top: -6px;
    color: red;
    font-size: 25px;
    cursor: pointer;
    display: none;
    z-index: 9999;
  }
}
</style>
